<template>
  <div class="">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="160px"
      label-position="top"
    >
      <el-row :gutter="16">
        <el-col :span="24">
          <div id="app">
            <!-- <Camera :image-list="localImageList" @image="getImage" /> -->
            <Video
              :image-list="localImageList"
              :video-list="localVideoList"
              :customerId="customerId"
              @image="getImage"
              @video="getVideo"
              @checkedImageSet="checkedImageSet"
            />
          </div>
        </el-col>
        <el-col :span="24">
          <hr />
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="" name="1">
              <template slot="title">
                <span style="font-size: 26px"> 结构评估</span>
              </template>
              <el-form-item label="鼻咽部分分泌物:" prop="bybffmw">
                <el-radio-group v-model="ruleForm.bybffmw">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="微量"> 微量 </el-radio>
                  <el-radio label="轻度"> 轻度 </el-radio>
                  <el-radio label="中度"> 中度 </el-radio>
                  <el-radio label="重度"> 重度 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="腭咽关闭（空吞）:" prop="tygb">
                <el-radio-group v-model="ruleForm.tygb">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="不完全"> 不完全 </el-radio>
                  <el-radio label="不能"> 不能 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="会厌谷分泌物:" prop="hygfmw">
                <el-radio-group v-model="ruleForm.hygfmw">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="微量"> 微量 </el-radio>
                  <el-radio label="轻度"> 轻度 </el-radio>
                  <el-radio label="中度"> 中度 </el-radio>
                  <el-radio label="重度"> 重度 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="梨状窦分秘物（左侧）:" prop="lzkfmwz">
                <el-radio-group v-model="ruleForm.lzkfmwz">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="微量"> 微量 </el-radio>
                  <el-radio label="轻度"> 轻度 </el-radio>
                  <el-radio label="中度"> 中度 </el-radio>
                  <el-radio label="重度"> 重度 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="梨状窦分秘物（右侧）:" prop="lzkfmwy">
                <el-radio-group v-model="ruleForm.lzkfmwy">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="微量"> 微量 </el-radio>
                  <el-radio label="轻度"> 轻度 </el-radio>
                  <el-radio label="中度"> 中度 </el-radio>
                  <el-radio label="重度"> 重度 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="喉前庭分泌物:" prop="hqtfmw">
                <el-radio-group v-model="ruleForm.hqtfmw">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="微量"> 微量 </el-radio>
                  <el-radio label="轻度"> 轻度 </el-radio>
                  <el-radio label="中度"> 中度 </el-radio>
                  <el-radio label="重度"> 重度 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="吞咽频率:" prop="typl">
                <el-radio-group v-model="ruleForm.typl">
                  <el-radio label="大于等于3次/分"> >=3次/分 </el-radio>
                  <el-radio label="小于3次/分"> <3次 /分 </el-radio>
                  <el-radio label="无自主吞咽"> 无自主吞咽 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="舌根后缩（空吞）:" prop="sghskt">
                <el-radio-group v-model="ruleForm.sghskt">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="减弱"> 减弱 </el-radio>
                  <el-radio label="无"> 无 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="咽壁活动（高调依）:" prop="ybhdgdy">
                <el-radio-group v-model="ruleForm.ybhdgdy">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="减弱"> 减弱 </el-radio>
                  <el-radio label="无"> 无 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="声带内收（左）:" prop="sdnsz">
                <el-radio-group v-model="ruleForm.sdnsz">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="减弱"> 减弱 </el-radio>
                  <el-radio label="固定"> 固定 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="声带内收（右）:" prop="sdnsy">
                <el-radio-group v-model="ruleForm.sdnsy">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="减弱"> 减弱 </el-radio>
                  <el-radio label="固定"> 固定 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="声带外展（左）:" prop="sdwzz">
                <el-radio-group v-model="ruleForm.sdwzz">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="减弱"> 减弱 </el-radio>
                  <el-radio label="固定"> 固定 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="声带外展（右）:" prop="sdwzy">
                <el-radio-group v-model="ruleForm.sdwzy">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="减弱"> 减弱 </el-radio>
                  <el-radio label="固定"> 固定 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="屏气:" prop="bq">
                <el-radio-group v-model="ruleForm.bq">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="不完全"> 不完全 </el-radio>
                  <el-radio label="不能"> 不能 </el-radio>
                  <el-radio label="不配合"> 不配合 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="感觉（轻触咽壁）:" prop="gjqcyb">
                <el-radio-group v-model="ruleForm.gjqcyb">
                  <el-radio label="正常反应"> 正常反应 </el-radio>
                  <el-radio label="弱反应"> 弱反应 </el-radio>
                  <el-radio label="无反应"> 无反应 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="会厌谷残留:" prop="hygcl">
                <el-radio-group v-model="ruleForm.hygcl">
                  <el-radio label="无"> 无 </el-radio>
                  <el-radio label="微量"> 微量 </el-radio>
                  <el-radio label="轻度"> 轻度 </el-radio>
                  <el-radio label="中度"> 中度 </el-radio>
                  <el-radio label="重度"> 重度 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="咳嗽反射:" prop="ksfs">
                <el-radio-group v-model="ruleForm.ksfs">
                  <el-radio label="正常"> 正常 </el-radio>
                  <el-radio label="延迟"> 延迟 </el-radio>
                  <el-radio label="无"> 无 </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="咳嗽效果:" prop="ksxg">
                <el-radio-group v-model="ruleForm.ksxg">
                  <el-radio label="正常"> 完全 </el-radio>
                  <el-radio label="有效"> 有效 </el-radio>
                  <el-radio label="略有效"> 略有效 </el-radio>
                  <el-radio label="无效"> 无效 </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="" name="2">
              <template slot="title">
                <span style="font-size: 26px"> 进食观察</span>
              </template>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column
                  prop="date"
                  label="性状"
                  width="70"
                  fixed="left"
                />
                <el-table-column
                  prop="name"
                  label="容积"
                  width="80"
                  fixed="left"
                >
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.a">
                      {{ scope.row.rj }}
                    </el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="提前溢出" width="110px">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.tqyc">
                      <el-radio label="无"> 无 </el-radio>
                      <el-radio label="有"> 有 </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="吞咽启动" width="200px">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.tyqd">
                      <el-radio label="正常"> 正常 </el-radio>
                      <el-radio label="延迟"> 延迟 </el-radio>
                      <el-radio label="无"> 无 </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="会厌谷残留（左）"
                  width="130px"
                >
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.hygclz">
                      <el-radio label="无"> 无 </el-radio>
                      <el-radio label="有"> 有 </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="会厌谷残留（右）"
                  width="130px"
                >
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.hygcly">
                      <el-radio label="无"> 无 </el-radio>
                      <el-radio label="有"> 有 </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="梨状窦残留（左）"
                  width="130px"
                >
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.lzdclz">
                      <el-radio label="无"> 无 </el-radio>
                      <el-radio label="有"> 有 </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="梨状窦残留（右）"
                  width="130px"
                >
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.lzdcly">
                      <el-radio label="无"> 无 </el-radio>
                      <el-radio label="有"> 有 </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="渗漏" width="110px">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.sl">
                      <el-radio label="无"> 无 </el-radio>
                      <el-radio label="有"> 有 </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="误吸">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.wx">
                      <el-radio label="无"> 无 </el-radio>
                      <el-radio label="有"> 有 </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
              </el-table>
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="160px"
                style="margin-top: 50px"
                label-position="top"
              >
                <el-form-item label="梨状窦残留:" prop="lzdcl">
                  <el-radio-group v-model="ruleForm.lzdcl">
                    <el-radio label="无"> 无 </el-radio>
                    <el-radio label="微量"> 微量 </el-radio>
                    <el-radio label="轻度"> 轻度 </el-radio>
                    <el-radio label="中度"> 中度 </el-radio>
                    <el-radio label="重度"> 重度 </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="渗漏误吸分级:" prop="slwxfj">
                  <el-radio-group v-model="ruleForm.slwxfj">
                    <el-radio label="正常"> 正常 </el-radio>
                    <el-radio label="微量"> 微量 </el-radio>
                    <el-radio label="轻度"> 轻度 </el-radio>
                    <el-radio label="中度"> 中度 </el-radio>
                    <el-radio label="重度"> 重度 </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="代偿方法:" prop="dcff">
                  <el-checkbox-group v-model="ruleForm.dcff">
                    <el-checkbox label="未做" />
                    <el-checkbox label="左转头" />
                    <el-checkbox label="右转头" />
                    <el-checkbox label="低头" />
                    <el-checkbox label="交互吞咽" />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="吞咽障碍严重程度评分:" prop="tyzapf">
                  <el-radio-group v-model="ruleForm.tyzapf">
                    <el-radio label="0：无吞咽障碍" />
                    <el-radio
                      label="1：轻度吞咽障碍(提前溢出和/或残留，但无渗漏和误吸)"
                    />
                    <el-radio label="2：中度吞咽障碍(渗漏和误吸单一质地食物)" />
                    <el-radio
                      label="3：重度吞咽障碍(渗漏和误吸两种或以上质地食物)"
                    />
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <br /><br />
      <div style="float: right">
        <el-button type="primary" @click="onSubmit"> 保存结果 </el-button>
        &nbsp;&nbsp;

        <el-button type="primary" @click="open"> 生成PDF </el-button>
        &nbsp;&nbsp;
        <el-button style="margin-right: 15px"> 取消 </el-button>
        <br /><br />
      </div>

      <!-- <el-row :gutter="16">
        <el-col :span="8">
          <el-card style="height: 800px; overflow: scroll">
            <div slot="header" class="clearfix">
              <span>结构评估</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>进食观察</span>
            </div>
          </el-card>
      
        </el-col>

        <el-col :span="6">
       
        </el-col>
      </el-row> -->
    </el-form>
  </div>
</template>

<script>
import Camera from './Camera.vue';
import Video from './Video.vue';
import indexedDB from '@/views/aproject/indexDB/IndexdedDB';
export default {
  // name: "evaluate",
  components: { Camera, Video },
  model: {
    prop: 'myProp',
    event: 'input',
  },
  props: {
    myProp: {
      default: '',
      type: [Object],
    },
  },
  data() {
    return {
      checkedImage: [],
      activeName: '',
      localVideoList: [],
      localImageList: [],
      aaa: this.myProp,
      customerId: '',
      tableData: [
        {
          date: '稀流质',
          rj: '3ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
        {
          date: '',
          rj: '5ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
        {
          date: '',
          rj: '10ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
        {
          date: '浓流质',
          rj: '3ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
        {
          date: '',
          rj: '5ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
        {
          date: '',
          rj: '10ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
        {
          date: '糊状',
          rj: '3ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
        {
          date: '',
          rj: '5ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
        {
          date: '',
          rj: '10ml',

          tqyc: '',
          tyqd: '',
          hygclz: '',
          hygcly: '',
          lzdclz: '',
          lzdcly: '',
          sl: '',
          wx: '',
        },
      ],
      rules: {
        xm: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      },
      ruleForm: {
        tyzapf: '',
        dcff: [],
        bybffmw: '',
        tygb: '',
        hygfmw: '',
        lzkfmwz: '',
        lzkfmwy: '',
        hqtfmw: '',
        typl: '',
        sghskt: '',
        ybhdgdy: '',
        sdnsz: '',
        sdnsy: '',
        sdwzz: '',
        sdwzy: '',
        bq: '',
        gjqcyb: '',
        hygcl: '',
        lzdcl: '',
        slwxfj: '',
      },
      customerForm: {},
    };
  },
  watch: {
    myProp(newVal, oldVal) {
      this.setDefault(newVal);
    },
  },

  created() {
    // // this.customerId = this.myProp;
    // this.customerForm = this.$route.query;
    // // localStorage.removeItem("typg");
    // // var data = eval(localStorage.getItem('typg'));
    // var data = eval(this.$localforage.getItem('typg'));
    // var customer = data.find((v) => {
    //   return v.customerId == this.customerId;
    // });
    // if (customer) {
    //   this.ruleForm = customer.jgpg;
    //   this.tableData = customer.jsgc;
    //   this.localImageList = customer.jctp;
    //   if (this.localImageList) {
    //     this.$emit('image-sent', this.localImageList);
    //   }
    //   console.log('customer.jctp', customer.jctp);
    // }
    // if(){}
  },

  mounted() {},
  methods: {
    getVideo(url) {
      this.localVideoList = url;
    },
    getImage(url) {
      this.localImageList = url;
    },
    async setDefault(query) {
      this.localVideoList = [];
      this.localImageList = [];
      this.customerId = query.id;
      this.customerForm = query;
      // localStorage.removeItem("typg");
      // var data = eval(localStorage.getItem('typg'));
      var data = eval(await this.$localforage.getItem('typg'));

      var customer = data.find((v) => {
        return v.customerId == this.customerId;
      });
      if (customer) {
        this.ruleForm = customer.jgpg;
        if (!this.ruleForm.dcff) {
          this.$set(this.ruleForm, 'dcff', []);
        }
        if (!this.ruleForm.tyzapf) {
          this.$set(this.ruleForm, 'tyzapf', '');
        }

        this.tableData = customer.jsgc;
        this.localImageList = customer.jctp;
        this.localVideoList = customer.jcsp;
        if (this.localImageList) {
          this.$emit('image-sent', this.localImageList);
        }
      }
    },
    checkedImageSet(val) {
      this.checkedImage = val;
    },
    open() {
      this.onSubmit();
      const routeUrl = this.$router.resolve({
        path: '/pdf/download',
        query: {
          ruleForm: JSON.stringify(this.ruleForm),
          tableData: JSON.stringify(this.tableData),
          customer: JSON.stringify(this.customerForm),
          localImageList: JSON.stringify(this.checkedImage),
        },
        params: { ruleForm: this.ruleForm, tableData: this.tableData },
      });
      window.open(routeUrl.href, '_blank');
    },
    async onSubmit() {
      if (!this.customerId) {
        this.$message.warning('请先在左侧选择患者!');
        return;
      }
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // var typg = eval(localStorage.getItem('typg'));
          var typg = eval(await this.$localforage.getItem('typg'));
          var customer = [];
          if (typg) {
            var ifHas = false;
            customer = typg.map((v) => {
              if (v.customerId == this.customerId) {
                ifHas = true;
                v = {
                  customerId: this.customerId,
                  jgpg: this.ruleForm,
                  jsgc: this.tableData,
                  jctp: this.localImageList,
                  jcsp: this.localVideoList,
                };
              }
              return v;
            });
            if (!ifHas) {
              customer.push({
                customerId: this.customerId,
                jgpg: this.ruleForm,
                jsgc: this.tableData,
              });
            }
          } else {
            customer.push({
              customerId: this.customerId,
              jgpg: this.ruleForm,
              jsgc: this.tableData,
              jctp: this.localImageList,
              jcsp: this.localVideoList,
            });
          }
          localStorage.setItem('typg', JSON.stringify(customer));
          await this.$localforage.setItem('typg', JSON.stringify(customer));
        } else {
          return false;
        }
      });
      this.$message.success('保存成功！');
    },
    setnl() {
      const today = new Date();
      const birthDate = new Date(this.form.csrq);
      let age = today.getFullYear() - birthDate.getFullYear();
      const m = today.getMonth() - birthDate.getMonth();
      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
      }
      this.form.nl = age;
    },
  },
};
</script>

<style>
.el-form--label-top .el-form-item__label {
  padding: 0 0 0 0;
}

.el-radio {
  margin-right: 10px;
}
</style>